<script setup lang="ts">
import {useStore} from "vuex";
// @ts-ignore
import * as echarts from "echarts";
import {nextTick, onBeforeMount, onMounted, reactive, ref, UnwrapRef, watch} from "vue";
import {toRaw} from "@vue/reactivity";
import http from "@/http";
// @ts-ignore
import moment from 'moment'
import Paging from '@/components/Paging.vue'
import {FormRules, FormInstance, ElMessage} from 'element-plus'

const store = useStore();
const aa = () => {
  store.state.isCollpace = !store.state.isCollpace
}

// 时间转换
let timeUpdate = (time: any) => {
  return moment(time).format('YYYY-MM-DD HH:mm:ss')
}


// 部门数据
let deptList = ref([])
// 用户数据
let userList = ref([])
// 分页数据  当前页数  默认多少条
let total = ref(0)
let pageNo = ref(1)
let pageSize = ref(5)

//  部门查询
let deptSelectList = () => {
  http.post('/sysdept/select').then(request => {
    deptList.value = request.data
  })
}
//  部门树形菜单
const defaultProps = {
  children: 'children',
  label: 'deptName',
}

//  树形部门查询用户
const handleNodeClick = (data: any) => {
  http.post('/sysUser/selectDeptLike', {
    deptId: data.deptId,
    pageNum: pageNo.value,
    pageSize: pageSize.value
  }).then(request => {
    userList.value = request.data.list
    total.value = request.data.total
  })
}

//  用户查询
let userSelectList = () => {
  http.post('/sysUser/selectAll', {pageNum: pageNo.value, pageSize: pageSize.value}).then(request => {
    console.log(request.data)
    userList.value = request.data.list
    total.value = request.data.total
  })
}


//  当前页数改变时触发
let PageChanges = (val: any) => {
  pageNo.value = val
  userSelectList()
}

// 每页多少条数据变化时触发
let pageSizeChanges = (val: any) => {
  pageSize.value = val
  userSelectList()
}


onMounted(() => {
  deptSelectList()
  userSelectList()
  sysPortSelectList()
  sysRoleSelectList()
})

//  查询参数
let queryParams = ref({
  nickName: undefined,
  phone: undefined,
  status: undefined
})


//  日期范围
let dataRange = ref()
let startTime = ref(null)
let endTime = ref(null)

let UsersStatus = [
  {
    id: 1,
    name: '正常'
  },
  {
    id: 0,
    name: '停用'
  }
]


// 条件模糊按钮
let handleAdd = () => {
  startTime.value = null
  endTime.value = null
  if (dataRange.value != undefined || dataRange.value != null) {
    startTime.value = dataRange.value[0]
    endTime.value = dataRange.value[1]
  }
  http.post('/sysUser/selectListLike', {
    nickName: queryParams.value.nickName, phonenumber: queryParams.value.phone,
    status: queryParams.value.status, startTime: startTime.value, endTime: endTime.value
  }).then(request => {
    userList.value = request.data.slice((pageNo.value - 1) * pageSize.value, pageNo.value * pageSize.value)
    total.value = request.data.length
  })
}

// 重置按钮
let resetQuery = (queryParams: any) => {
  queryParams.nickName = undefined
  queryParams.status = undefined
  queryParams.phone = undefined
  dataRange.value = undefined
  userSelectList()
}


//  表单数据类型
interface RuleDeptForm {
  userId: number,
  deptId: string,
  userName: string,
  nickName: string,
  userType: string,
  email: string,
  phonenumber: string,
  sex: string,
  password: string,
  status: boolean,
  postIds: [],
  roleIds: [],
  remark: string
}

// 表单数据
let usersFrom = reactive<RuleDeptForm>({
  userId: 0,
  deptId: '',
  userName: '',
  nickName: '',
  userType: '',
  email: '',
  phonenumber: '',
  sex: '',
  password: '000000',
  status: true,
  postIds: [],
  roleIds: [],
  remark: ''

})
//  表单验证
const ruleFormRef = ref<RuleDeptForm>()
const rules = reactive<FormRules<RuleDeptForm>>({
  userName: [
    {required: true, message: '用户账号不能为空', trigger: 'blur'},
  ],
  deptId: [
    {required: true, message: '归属部门不能为空', trigger: 'blur'},
  ],
  email: [
    {required: true, message: '邮箱不能为空', trigger: 'blur'},
    {type: 'email', message: "'请输入正确的邮箱地址", trigger: ['blur', 'change']}
  ],
  phonenumber: [
    {required: true, message: '手机号码不能为空', trigger: 'blur'},
    {pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur'}
  ],
  nickName: [
    {required: true, message: '用户昵称不能为空', trigger: 'blur'},
  ],
  password: [
    {required: true, message: '用户密码不能为空', trigger: 'blur'},
  ]
})

let userSex = [
  {
    id: 0,
    name: '男',
    value: '0'
  },
  {
    id: 1,
    name: '女',
    value: '1'
  }
]

let sysPortList = ref([])
let sysRoleList = ref([])
//  岗位查询
let sysPortSelectList = () => {
  http.post('/sysPort/selectPortList').then(request => {
    sysPortList.value = request.data
  })
}

// 角色查询
let sysRoleSelectList = () => {
  http.post('/sysUser/selectRoleList').then(request => {
    sysRoleList.value = request.data
  })
}

//  弹出层
let dialogVisible = ref(false)
let title = ref(null)

let userPassShow = ref(true)
//  新增按钮
let userAddBtn = () => {
  //@ts-ignore
  title.value = "添加用户"
  dialogVisible.value = true
  userPassShow.value = true
}

//  新增修改前查询
let selectUserUnique = () => {
  http.post('/sysUser/selectUserUnique', {
    userName: usersFrom.userName, phonenumber: usersFrom.phonenumber,
    email: usersFrom.email, userId: usersFrom.userId
  }).then(request => {

    for (const t of request.data) {
      if (t.username == usersFrom.userName) {
        // @ts-ignore
        return ElMessage({message: usersFrom.userName + '用户账号已存在', type: 'error'})
      } else if (t.phonenumber == usersFrom.phonenumber) {
        // @ts-ignore
        return ElMessage({message: '用户手机号重复', type: 'error'})
      } else if (t.email == usersFrom.email) {
        // @ts-ignore
        return ElMessage({message: '用户邮箱重复', type: 'error'})
      }
    }

    if (request.data.length == 0) {
      console.log(usersFrom)
      if (usersFrom.userId == 0) {

        http.post('/sysUser/insertUser', usersFrom).then(res => {
          // @ts-ignore
          if (res.code == 200) {
            dialogVisible.value = false
            ElMessage({message: '新增用户成功', type: 'success'})
            userSelectList()
          }
        })

      } else {
        console.log(usersFrom.status)
        http.post('/sysUser/updateUser', {
          userId: usersFrom.userId, userName: usersFrom.userName, deptId: usersFrom.deptId,
          phonenumber: usersFrom.phonenumber, email: usersFrom.email, status: usersFrom.status, sex: usersFrom.sex,
          roleIds: usersFrom.roleIds, postIds: usersFrom.postIds, remark: usersFrom.remark
        }).then(res => {
          // @ts-ignore
          if (res.code == 200) {
            dialogVisible.value = false
            ElMessage({message: '修改用户成功', type: 'success'})
            userSelectList()
          }
        })


      }
    }


  })

}

let updateBtn = ref(true)
let deleteBtn = ref(true)

let checkArray = ref({})
let removeCheck = ref([])
//  表格多选触发
let checkRows = (data: any) => {
  let list = JSON.parse(JSON.stringify(data))
  updateBtn.value = true
  deleteBtn.value = true
  removeCheck.value = data
  if (data.length == 1) {
    if (list[0].userId != 1) {
      updateBtn.value = false
      deleteBtn.value = false
    }
    checkArray.value = data
  } else if (data.length > 1) {
    deleteBtn.value = false
  }

}


let userStatus = ref(null)

//@ts-ignore
let roleIds = []
//@ts-ignore
let postIds = []

//  修改按钮
let userUpdate = (row: any) => {
  roleIds = []
  postIds = []
  //@ts-ignore
  title.value = "修改用户"
  dialogVisible.value = true
  userPassShow.value = false

  if (row == undefined) {
    let list = JSON.parse(JSON.stringify(checkArray.value))
    http.post('/sysUserCount/selectRole', {userId: list[0].userId}).then(res => {
      for (const datum of res.data) {
        roleIds.push(datum.roleId)
      }
      //@ts-ignore
      usersFrom.roleIds = roleIds
    })
    http.post('/sysUserCount/selectPost', {userId: list[0].userId}).then(res => {
      for (const datum of res.data) {
        postIds.push(datum.postId)
      }
      //@ts-ignore
      usersFrom.postIds = postIds
    })

    nextTick(() => {
      userStatus.value = list[0].status
      usersFrom.userName = list[0].username
      Object.assign(usersFrom, list[0])
    })

  } else {
    http.post('/sysUserCount/selectRole', {userId: row.userId}).then(res => {
      for (const datum of res.data) {
        roleIds.push(datum.roleId)
      }
      //@ts-ignore
      usersFrom.roleIds = roleIds
    })
    http.post('/sysUserCount/selectPost', {userId: row.userId}).then(res => {
      for (const datum of res.data) {
        postIds.push(datum.postId)
      }
      //@ts-ignore
      usersFrom.postIds = postIds
    })

    nextTick(() => {
      userStatus.value = row.status
      usersFrom.userName = row.username
      Object.assign(usersFrom, row)
    })

  }
}


let dialogUserStatus = ref(false)
let dialogName = ref(null)
let userNames = ref(null)
let uid = ref(null)
let status = ref(null)

let updateUserStatus = (row: any) => {
  // @ts-ignore
  dialogName.value = row.status === true ? '启用' : '停用'
  userNames.value = row.username
  dialogUserStatus.value = true
  uid.value = row.userId
  status.value = row.status
}

let updateStatus = () => {
  http.post('/sysUser/upUserStatus', {userId: uid.value, status: status.value}).then(res => {
    // @ts-ignore
    if (res.code == 200) {
      dialogUserStatus.value = false
      ElMessage({message: dialogName.value + '成功', type: 'success'})
      userSelectList()
    }
  })
}


let removeDialog = ref(false)
let reUserName = ref(null)
let reUserId = ref(null)

//  删除
let userRemove = (row: any) => {
  reUserId.value = null
  if (row != null) {
    reUserName.value = row.username
    reUserId.value = row.userId
    removeDialog.value = true
  } else {
    // @ts-ignore
    reUserName.value = "选中"
    removeDialog.value = true
  }
}

let removeTrue = () => {
  if (reUserId.value != null) {
    http.post('/sysUser/deleteUserById', {userId: reUserId.value}).then(res => {
      // @ts-ignore
      if (res.code == 200) {
        removeDialog.value = false
        ElMessage({message: '删除用户成功', type: 'success'})
        userSelectList()
      }
    })
  } else {

    let userIds = []
    let list = JSON.parse(JSON.stringify(removeCheck.value))
    for (const t of list) {
      userIds.push(t.userId)
    }
    if (userIds[0] != 1) {
      http.post('/sysUser/deleteUserByIds', {userIds: userIds}).then(res => {
        // @ts-ignore
        if (res.code == 200) {
          removeDialog.value = false
          ElMessage({message: '删除用户成功', type: 'success'})
          userSelectList()
        }
      })
    }else {
      ElMessage({message: '不能操作超级管理员', type: 'error'})
    }



  }
}


//  表单提交
let submitUser = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      // 验证通过查询
      selectUserUnique()
    }
  })
}

// 表单重置
let resetForm = () => {
  // @ts-ignore
  ruleFormRef.value?.resetFields()
}

</script>

<template>
  <div>
    <!--   导航区   -->
    <div class="a1">
      <el-icon size="23" @click="aa">
        <Fold/>
      </el-icon>
      <div style="display: inline-block;margin-left: 10px;position: absolute;margin-top: 7px">
        <el-icon size="18" color="dodgerblue">
          <HomeFilled/>
        </el-icon>
      </div>
      <div style="display: inline-block;margin-bottom: 5px;margin-left: 30px;margin-top: 10px">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item></el-breadcrumb-item>
          <el-breadcrumb-item><span style="font-size: 13px;color: black">系统管理</span></el-breadcrumb-item>
          <el-breadcrumb-item><span style="font-size: 12px;color: gray">用户管理</span></el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>

    <div>
      <!-- 左侧部门菜单-->
      <div style="width: 190px;display: inline-block;">
        <el-tree
            style="max-width: 220px; margin-top: 10px"
            :data="deptList"
            :props="defaultProps"
            :default-expand-all="true"
            :expand-on-click-node="false"
            highlight-current
            @node-click="handleNodeClick"
        />
      </div>

      <div style="margin-left:30px;display: inline-block; position: absolute; ">

        <!-- 用户搜索-->
        <el-form :model="queryParams" :inline="true">
          <div class="searchBach">
            <el-form-item label="用户昵称">
              <el-input clearable v-model="queryParams.nickName" class="search_input" placeholder="请输入用户名称"/>
            </el-form-item>
          </div>
          <div class="searchBach">
            <el-form-item label="手机号码">
              <el-input clearable v-model="queryParams.phone" class="search_input" placeholder="请输入手机号码"/>
            </el-form-item>
          </div>
          <div class="searchBach">
            <el-form-item label="状态">
              <el-select clearable v-model="queryParams.status" style="width: 190px;" placeholder="部门状态">
                <el-option v-for="dict in UsersStatus"
                           :key="dict.id"
                           :label="dict.name"
                           :value="dict.id"/>
              </el-select>
            </el-form-item>
          </div>
          <div class="searchBach">
            <el-form-item label="创建时间">
              <el-date-picker
                  v-model="dataRange"
                  type="daterange"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  time-format="A hh:mm:ss"
                  style="width: 200px"
              />
            </el-form-item>
          </div>
          <div class="searchBach">
            <el-form-item>
              <el-button class="search_button" type="primary" plain @click="handleAdd()">
                <el-icon style="margin-right: 5px">
                  <Search/>
                </el-icon>
                搜索
              </el-button>
              <el-button class="search_button" type="info" plain @click="resetQuery(queryParams)">
                <el-icon style="margin-right: 5px">
                  <Refresh/>
                </el-icon>
                重置
              </el-button>
            </el-form-item>
          </div>
        </el-form>

        <!-- 操作按钮 -->
        <div style="margin-top: 10px">
          <el-button type="primary" @click="userAddBtn()">
            <el-icon style="margin-right: 5px">
              <Plus/>
            </el-icon>
            新增
          </el-button>
          <el-button type="success" @click="userUpdate()" :disabled="updateBtn">
            <el-icon style="margin-right: 5px">
              <Edit/>
            </el-icon>
            修改
          </el-button>
          <el-button type="danger" @click="userRemove()" :disabled="deleteBtn">
            <el-icon style="margin-right: 5px">
              <Delete/>
            </el-icon>
            删除
          </el-button>
          <!--          <el-button type="info">-->
          <!--            <el-icon style="margin-right: 5px">-->
          <!--              <Upload/>-->
          <!--            </el-icon>-->
          <!--            导入-->
          <!--          </el-button>-->
          <!--          <el-button type="warning">-->
          <!--            <el-icon style="margin-right: 5px">-->
          <!--              <Download/>-->
          <!--            </el-icon>-->
          <!--            导出-->
          <!--          </el-button>-->

        </div>

        <!-- 用户表格        -->
        <div style="width: 95%; margin-top: 10px">
          <el-table :data="userList"
                    @selection-change="checkRows"
                    :header-cell-style="{'background-color':'whitesmoke','color':'#58626b'}"
                    :row-style="{'height':'50px','font-size':'13px'}"
          >
            <el-table-column type="selection" width="55"/>
            <el-table-column prop="userId" label="用户编号" width="80" align="center"/>
            <el-table-column prop="username" label="用户账号" width="90" align="center"/>
            <el-table-column prop="nickName" label="用户昵称" width="120" align="center"/>
            <el-table-column prop="dept[0].deptName" label="部门" width="100" align="center"/>
            <el-table-column prop="phonenumber" label="手机号码" width="140" align="center"/>
            <el-table-column prop="status" label="状态" width="80" align="center">
              <template #default="scope">
                <el-switch :disabled="scope.row.userId==1"
                           inactive-value="0"
                           @change="updateUserStatus(scope.row)"
                           v-model="scope.row.status"/>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" align="center">
              <template #default="scope">
                <span style="margin-left: 10px">{{ timeUpdate(scope.row.createTime) }}</span>
              </template>
            </el-table-column>

            <el-table-column label="操作" align="center">
              <template #default="scope">
                <!--                v-if="scope.roles[0].roleId!=1"-->
                <el-button :disabled="scope.row.userId==1" size="mini" type="text" style="font-size: 12px"
                           @click="userUpdate(scope.row)">
                  <el-icon style="margin-right: 5px">
                    <Edit/>
                  </el-icon>
                  修改
                </el-button>
                <el-button @click="userRemove(scope.row)" :disabled="scope.row.userId==1" type="text"
                           style="font-size: 12px">
                  <el-icon style="margin-right: 5px">
                    <Delete/>
                  </el-icon>
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!--    分页-->
          <Paging :total="total" :page-no="pageNo" :page-size="pageSize"
                  @pageSizeChange="pageSizeChanges"
                  @pageChange="PageChanges" style="margin-right: 50px"></Paging>
        </div>

      </div>
    </div>

  </div>


  <!--  新增、修改按钮弹出框-->
  <el-dialog v-model="dialogVisible" :title="title" width="600" @close="resetForm()">
    <el-form ref="ruleFormRef" :rules="rules" :model="usersFrom" status-icon label-width="auto"
             style="height: auto; margin-top: 20px">
      <el-form-item v-show="false" label="用户编号" prop="userId">
        <el-input v-model="usersFrom.userId"/>
      </el-form-item>
      <div class="from_back" style="width: 283px; display: inline-block">
        <el-form-item label="用户账号" prop="userName"
                      style="padding-top: 14px; padding-left: 15px; padding-right: 15px">
          <el-input v-model="usersFrom.userName" style="width: 200px" placeholder="请输入用户账号"/>
        </el-form-item>
      </div>
      <div class="from_back" style="width: 283px; display: inline-block">
        <el-form-item label="归属部门" prop="deptId"
                      style="padding-top: 14px; padding-left: 15px; padding-right: 15px">
          <el-tree-select
              v-model="usersFrom.deptId"
              :data="deptList"
              :props="defaultProps"
              value-key="deptId"
              :check-strictly="false"
              placeholder="请输入归属部门"
          />
        </el-form-item>
      </div>
      <div class="from_back" style="width: 283px; display: inline-block">
        <el-form-item label="手机号码" prop="phonenumber"
                      style="padding-top: 14px; padding-left: 15px; padding-right: 15px">
          <el-input v-model="usersFrom.phonenumber" style="width: 200px" placeholder="请输入手机号码"/>
        </el-form-item>
      </div>
      <div class="from_back" style="width: 283px; display: inline-block">
        <el-form-item label="邮箱" prop="email" style="padding-top: 14px; padding-left: 15px; padding-right: 15px">
          <el-input v-model="usersFrom.email" style="width: 200px" placeholder="请输入邮箱"/>
        </el-form-item>
      </div>
      <div v-show="userPassShow" class="from_back" style="width: 283px; display: inline-block">
        <el-form-item label="用户昵称" prop="nickName"
                      style="padding-top: 14px; padding-left: 15px; padding-right: 15px">
          <el-input v-model="usersFrom.nickName" style="width: 200px" placeholder="请输入用户昵称"/>
        </el-form-item>
      </div>
      <div v-show="userPassShow" class="from_back" style="width: 283px; display: inline-block">
        <el-form-item label="用户密码" prop="password"
                      style="padding-top: 14px; padding-left: 15px; padding-right: 15px">
          <el-input v-model="usersFrom.password" type="password" style="width: 200px"
                    placeholder="请输入用户密码"/>
        </el-form-item>
      </div>
      <div class="from_back" style="width: 283px; display: inline-block">
        <el-form-item label="用户性别" prop="sex"
                      style="padding-top: 14px; padding-left: 15px; padding-right: 15px">
          <el-select v-model="usersFrom.sex" style="width: 190px;" placeholder="请选择">
            <el-option v-for="dict in userSex"
                       :key="dict.id"
                       :label="dict.name"
                       :value="dict.value"/>
          </el-select>
        </el-form-item>
      </div>
      <div class="from_back" style="width: 283px; display: inline-block">
        <el-form-item label="状态" style="padding-top: 14px; padding-left: 15px; padding-right: 15px">
          <el-radio-group v-model="usersFrom.status" class="ml-4" style="margin-top: -4px">
            <el-radio :label="userStatus=true" size="large">正常</el-radio>
            <el-radio :label="userStatus=false" size="large">停用</el-radio>
          </el-radio-group>
        </el-form-item>
      </div>
      <div class="from_back" style="width: 283px;  height: auto; display: inline-block">
        <el-form-item label="岗位" prop="postIds"
                      style="padding-top: 14px; padding-left: 15px; padding-right: 15px">
          <el-select v-model="usersFrom.postIds"
                     multiple
                     filterable
                     allow-create
                     default-first-option
                     :reserve-keyword="false"
                     placeholder="请选择"
                     style="width: 190px"
          >
            <el-option
                v-for="item in sysPortList"
                :key="item.postId"
                :label="item.postName"
                :value="item.postId"
            />
          </el-select>
        </el-form-item>
      </div>
      <div class="from_back" style="width: 283px; height: auto; display: inline-block">
        <el-form-item label="角色" prop="roleIds"
                      style="padding-top: 14px; padding-left: 15px; padding-right: 15px">
          <el-select v-model="usersFrom.roleIds"
                     multiple
                     filterable
                     allow-create
                     default-first-option
                     :reserve-keyword="false"
                     placeholder="请选择"
                     style="width: 190px"
          >
            <el-option
                v-for="item in sysRoleList"
                :key="item.roleId"
                :label="item.roleName"
                :value="item.roleId"
            />
          </el-select>
        </el-form-item>
      </div>
      <div class="from_back" style="height: 80px">
        <el-form-item label="备注" prop="remark"
                      style="padding-top: 14px; padding-left: 15px; padding-right: 15px">
          <el-input v-model="usersFrom.remark" style="width: 456px; height: 50px"
                    type="textarea" placeholder="请输入内容"/>
        </el-form-item>
      </div>

      <div class="dialog-footer" style="margin-top: 20px;margin-left: 420px ">
        <el-button type="primary" @click="submitUser(ruleFormRef)">确定</el-button>
        <el-button @click="dialogVisible=false">取消</el-button>
      </div>
    </el-form>
  </el-dialog>


  <!--  修改用户状态弹出框-->
  <el-dialog v-model="dialogUserStatus" title="警告" width="500"
             style="height: 160px;margin-top: 240px;font-weight: bold">
    <div style="font-weight: lighter; margin-top: 12px">
      <el-icon size="24px" color="#e4b53d" style="vertical-align: -5px;">
        <WarningFilled/>
      </el-icon>
      是否确认{{ dialogName }}" {{ userNames }} "用户
    </div>
    <template #footer>
      <div class="dialog-footer" style="margin-top: 6px">
        <el-button type="primary" @click="updateStatus()">确定</el-button>
        <el-button @click="dialogUserStatus=false">取消</el-button>
      </div>
    </template>
  </el-dialog>

  <!--  删除弹出框-->
  <el-dialog v-model="removeDialog" title="警告" width="500" style="height: 160px;margin-top: 240px;font-weight: bold">
    <div style="font-weight: lighter; margin-top: 12px">
      <el-icon size="24px" color="#e4b53d" style="vertical-align: -5px;">
        <WarningFilled/>
      </el-icon>
      是否确认删除" {{ reUserName }} "用户?
    </div>
    <template #footer>
      <div class="dialog-footer" style="margin-top: 6px">
        <el-button type="primary" @click="removeTrue()">确定</el-button>
        <el-button @click="removeDialog=false">取消</el-button>
      </div>
    </template>
  </el-dialog>


</template>

<style scoped lang="scss">
.a1 {
  width: 100%;
  height: 50px;
}

.searchBach {
  border-radius: 10px;
  display: inline-block;
  line-height: 65px;
  height: 52px;
  padding-left: 20px;
}

.searchBach:hover {
  background: aliceblue;
}

.search_input {
  height: 32px;
  width: 220px;
}

.search_button {
  width: 80px;
  height: 32px;
  font-size: 13px;
}


::v-deep .el-table__body {
  //-webkit-border-horizontal-spacing: 13px;  // 水平间距
  -webkit-border-vertical-spacing: 10px; // 垂直间距
}

::v-deep .el-table, .el-table__expanded-cell {
  background-color: transparent
}

.from_back {
  border-radius: 10px;
  height: 60px;
}

.from_back:hover {
  background: aliceblue;
}


</style>